<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="test0">0（信息框，默认）</button><br/>
		<button id="test1">1（页面层）</button><br/>
		<button id="test2">2（iframe层 可以嵌套一个网页）</button><br/>
		<button id="test3">3（加载层）</button><br/>
		<button id="test4">4（tips层）</button><br/>
		<button id="test5">alert</button><br/>
		<button id="test6">confirm</button><br/>
		<button id="test7">btn</button><br/>
		
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$('#test0').click(function() {
				layer.open({
					type: 0,
					content: '弹窗的内容'
				});
			});
			
			$('#test1').click(function() {
				layer.open({
					type: 1,
					area: ['500px', '300px'],
					content: $('#divId')
				}); 
			});
			
			$('#test2').click(function() {
				layer.open({
					type: 2,
					content: 'bootstrap1.html',
					area: ['900px', '600px']
				}); 
			});
			
			$('#test3').click(function() {
				layer.open({
					type: 3
				}); 
			});
			
			$('#test4').click(function() {
				layer.open({
					type: 4,
					content: ['学习Layer', '#test4']
				});
				//小tips
				/* layer.tips(
					'我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', 
					'吸附元素选择器', 
					{
						tips: [1, '#3595CC'],
						time: 4000
					},
				); */
			});
			
			$('#test5').click(function() {
				layer.alert(
					'这是一个警告!',
					{icon: 2},
					function(index) {
						console.log(index);
						layer.close(index);
					}
				); 
			});
			
			$('#test6').click(function() {
				layer.confirm(
					'您确认要删除么？',
					{icon: 3, title: '提示'},
					function(index) {
						layer.close(index);
					}
				);
			});
			
			$('#test7').click(function() {
				layer.open({
					type: 0,
					btn: ['按钮1','按钮2','按钮3'],
					yes: function(index) {
						console.log('点击了第一个按钮');
						//手动关掉
						layer.close(index);
					},
					btn2: function() {
						console.log('点击了第二个按钮');
					},
					btn3: function() {
						console.log('点击了第三个按钮');
					}
				});
			});
		</script>
	</body>
	<div id="divId" style="display: none;">
		姓名：<input type="text" />
	</div>
</html>
